<!--登录-->
<template>
	<div class="main">
		<el-card class="login-main" shadow="always">
			<template #header>
				<div class="card-header">
					<span class="title">我要注册</span>
				</div>
			</template>
			<el-form
				ref="ruleFormRef"
				label-position="top"
				label-width="auto"
				:model="state.from"
				:rules="rules"
				style="max-width: 600px"
			>
				<el-form-item label="用户名"  prop="username">
					<el-input v-model="state.from.username" placeholder="请输入用户名" />
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input   type="password" show-password  v-model="state.from.password" placeholder="请输入密码"/>
				</el-form-item>
				<el-form-item label="再次输入密码" prop="password">
					<el-input   type="password" show-password  v-model="state.from.password2" placeholder="请输入密码"/>
				</el-form-item>
				<el-form-item>
					<el-button  type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
				</el-form-item>
			</el-form>
			<template #footer >
				<el-row  class="login-bottom" :gutter="20">
					<el-col :span="12">
						<a class="no-username" @click="router.push('login')"> 已经有账号？</a>
					</el-col>
<!--					<el-col :span="12">-->
<!--						<a class="no-password"> 密码忘了？</a>-->
<!--					</el-col>-->
				</el-row>
			</template>
		</el-card>
	</div>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { userStore } from '~/stores/userStore'
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const state = reactive({
	from: {
		username: '',
    password: '',
		password2:''
	},
})
const rules = reactive<FormRules<any>>({
	username: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
	],
})

/**
 * 确定
 * @param formEl
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			if (state.from.password !== state.from.password2) {
				toast.error("两次输入密码不一致")
			}

			http.post("register",state.from).then(res =>{
				toast.success(res.message)
				router.push("/login")
			})
		}
	})
}

</script>
<style scoped>

.main{
	width: 100%;
	height: 100vh;
	min-height: 800px;
	background-image: url("./login-bg.jpg");
	background-size: cover;  /* 确保背景图像覆盖整个区域 */
	background-position: center; /* 背景图像居中显示 */
	display: flex;             /* 启用 Flexbox */
	justify-content: center;   /* 水平居中 */
	align-items: center;       /* 垂直居中 */
	.login-main{
		margin: 0 auto;
		width: 380px;
	}
	.card-header{
		text-align: center;
    font-size: 20px;
	}
	.login-bottom{
		font-size: 14px;
		cursor: pointer;
	}
	.no-username:hover{
		color: #27a2d9;
	}
	.no-password:hover{
		color: #27a2d9;
	}
}


:deep(.el-button){
	width: 100%;
}


</style>
<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>
